<template>
  <div class="box">
    <div class="q1">
      <img
        src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF"
        alt=""
      />

      <p>用 户 名：飞翔的熊</p>
      <router-link :to="{ name: 'mydetail' }"
        ><icon size="7vw" name="other-pay"
      /></router-link>
      <router-link :to="{ name: 'SetUp' }">
        <icon name="setting-o" size="7vw" />
      </router-link>
    </div>
    <div class="q2">
      <div>
        <icon class="icon1" name="diamond-o" />
        <h5>会员等级</h5>
        <p>写评价助升级</p>
      </div>
      <div>
        <icon class="icon1" name="medal-o" />
        <h5>会员等级</h5>
        <p>写评价助升级</p>
      </div>
      <div>
        <icon class="icon1" name="bookmark-o" />
        <h5>会员等级</h5>
        <p>写评价助升级</p>
      </div>
    </div>
    <grid square :border="false" id="grid1">
      <grid-item>
        <icon class="icon2" name="star-o" />
        <p>收藏</p>
      </grid-item>
      <grid-item>
        <icon class="icon2" name="comment-o" />
        <p>待评价</p>
      </grid-item>
      <grid-item>
        <router-link :to="{ name: 'Contribution' }"
          ><icon class="icon2" name="coupon-o" />
          <p>贡献信息</p>
        </router-link>
      </grid-item>
      <grid-item>
        <router-link :to="{ name: 'Fabulous' }">
          <icon class="icon2" name="good-job-o" />
          <p>赞过</p>
        </router-link>
      </grid-item>
      <grid-item>
        <icon class="icon2" name="orders-o" />
        <p>订单</p>
        <h6>一个订单待支付</h6>
      </grid-item>
      <grid-item>
        <router-link :to="{ name: 'CardBag' }">
          <icon class="icon2" name="bag-o"
        /></router-link>
        <p>卡劵</p>
        <h6>抢新人专属礼包</h6>
      </grid-item>
      <grid-item>
        <icon class="icon2" name="award-o" />
        <p>积分</p>
      </grid-item>
      <grid-item>
        <icon class="icon2" name="balance-list-o" />
        <p>钱包</p>
        <h5>进入钱包</h5>
      </grid-item>
    </grid>
    <swipe class="my-swipe" indicator-color="blue">
      <swipe-item
        ><grid square :border="false" id="grid2">
          <grid-item>
            <icon class="icon3" name="goods-collect-o" />
            <p>限时秒杀</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="font-o" />
            <p>草稿箱</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="bookmark-o" />
            <p>联系客服</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="bullhorn-o" />
            <p>商户信息</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="apps-o" />
            <p>大众评审</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="smile-comment-o" />
            <p>官方认证</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="shop-collect-o" />
            <p>发票助手</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="underway-o" />
            <p>美团公益</p>
            <p>美团公益</p>
          </grid-item>
        </grid></swipe-item
      >
      <swipe-item
        ><grid square :border="false" id="grid2">
          <grid-item>
            <icon class="icon3" name="cluster-o" />
            <p>限时秒杀</p>
          </grid-item>
          <grid-item>
            <icon class="icon3" name="bar-chart-o" />
            <p>草稿箱</p>
          </grid-item>
        </grid></swipe-item
      >
    </swipe>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Grid, GridItem, Swipe, SwipeItem, Icon } from 'vant'
</script>
<style scoped>
.box {
  /* background-image: url(../images/bg.jpg); */
  background-size: cover;
}
.q1 {
  padding: 10px 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.q1 p {
  flex: 1;
}
.q1 img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.q2 {
  width: 95vw;
  height: 80px;
  margin: 10px auto;
  border-radius: 18px;
  background-color: aliceblue;

  display: flex;
}
.q2 div {
  flex: auto;
  padding: 0 40px;
  margin: auto;
  line-height: 25px;
}
.q2 p {
  font-size: 10px !important;
}
.q2 .icon1 {
  font-size: 50px;
  color: red;
  float: left;
  width: 50px;
}
#grid1 {
  width: 95vw;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px auto;
}
#grid1 img {
  width: 10vw;
}
#grid2 {
  width: 95vw;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px auto;
}
.icon2 {
  color: red;
  font-size: 60px;
}
.icon3 {
  color: orangered;
  font-size: 60px;
}
</style>
